<template>
  <view class="order_container">
    <view class="title">
      <text v-for="(item, index) in headers" :key="index"
        :class="type === item.label ? 'active' : ''" @click="clickTitle(item.label)">
        {{ item.name }}
      </text>
    </view>
    <view style="height: 100rpx"></view>
    <view class="list" v-if="tableData.length">
      <view v-for="(item, index) in tableData" :key="index" class="item">
        <view class="one">
          <text>订单编号：</text>
          <text class="singleRowEllipsis">{{ item.sn }}</text>
          <text @click="copy(item.sn)">复制</text>
          <text>{{ setOrderStatus(item) }}</text>
        </view>
        <view class="two" @click="orderStatusBtn('订单详情', item)">
          <view class="imgList">
            <image v-for="(ii, index) in setOrderImg(item.orderItems)" :key="index"
              :src="ii.image ? ii.image : staticUrl() + '/home/defaultImg.png'" mode="aspectFit">
            </image>
          </view>
          <view>
            <img :src="staticUrl() + '/personalCenter/right.png'" alt="" class="right" />
          </view>
        </view>
        <view class="three">
          <view>
            <text>
              共{{ item.orderItems.length }}个品种{{ setOrderGoodsNum(item.orderItems) }}件商品
            </text>
          </view>
          <view>
            <text>合计：</text>
            <text>￥{{ item.flowPrice }}</text>
          </view>
        </view>
        <view class="four">
          <text v-if="item.allowOperationVO.inspectionReport" class="dw"
            @click="dwImg(item)">下载资质</text>
          <text v-for="(ins, index) in setOrderButton(item)" :key="index" :class="ins.styles"
            @click="orderStatusBtn(ins.title, item)">
            {{ ins.title }}
          </text>
        </view>
      </view>
    </view>

    <view class="list2" v-if="!tableData.length"> 暂时没有更多数据 </view>

    <Dialog :dialog="dialog" :title="title" :content="content" @confirm="dialogConfirm"
      @cancel="dialogCancel">
    </Dialog>
  </view>
</template>

<script>
import {
  queryOrder,
  confirmReceipt,
  cancellationOrder,
  deleteOrder,
  remindShipment,
  orderAgainPay,
  checkLogistics,
  buyAgain
} from '@/api/order/index.js'
import { addToCart } from '@/api/home/index'
import dict from '@/config/dicts.js'
import Dialog from '@/components/dialog'

export default {
  components: { Dialog },
  data () {
    return {
      type: '',
      tableData: [],
      pageNumber: 1,
      pageSize: 30,
      headers: [
        { label: 'ALL', name: '全部' },
        { label: 'WAIT_PAY', name: '待支付' },
        { label: 'WAIT_SHIP', name: '待发货' },
        { label: 'WAIT_ROG', name: '待收货' },
        { label: 'COMPLETE', name: '已完成' }
      ],
      orderStatus: '',
      dialog: false,
      title: '',
      content: '',
      sn: ''
    }
  },
  onLoad (val) {
    this.type = val.type
    this.getList()
  },
  // 监听触底
  onReachBottom () {
    this.pageNumber++
    this.getList()
  },
  onPullDownRefresh () {
    this.init()
    this.getList()
  },
  methods: {
    dwImg (item) {
      // this.orderStatus = "下载资质"
      // this.title = "下载资质"
      // this.content = "确认下载资质吗"
      // this.dialog = true
      // this.sn = item.sn
      uni.navigateTo({ url: '/subpackage/order/dw?sn=' + item.sn })
    },
    init () {
      this.pageNumber = 1
      this.tableData = []
    },
    dialogCancel () {
      this.dialog = false
      this.orderStatus = ''
      this.title = ''
      this.content = ''
    },
    // 对话框 确认按钮
    dialogConfirm () {
      if (this.orderStatus === '再次购买') {
        buyAgain(this.sn)
          .then(res => {
            if (res.code === 200) {
              res.data.forEach((i, j) => {
                addToCart({ num: parseInt(i.num), skuId: i.skuId, orderSn: this.sn }).finally(
                  () => {
                    if (j === res.data.length - 1) {
                      this.dialog = false
                      uni.switchTab({ url: '/pages/shoppingCarts/index' })
                    }
                  }
                )
              })
            }
          })
          .catch(() => {
            uni.showToast({ icon: 'none', title: '失败', mask: true })
          })
      }
      if (this.orderStatus === '取消订单') {
        cancellationOrder(this.sn)
          .then(res => {
            if (res.code === 200) {
              uni.showToast({ icon: 'success', title: '成功', mask: true })
              this.pageNumber = 1
              this.tableData = []
              this.getList()
            }
          })
          .finally(() => {
            this.dialog = false
          })
      }
      if (this.orderStatus === '确认收货') {
        confirmReceipt(this.sn)
          .then(res => {
            if (res.code === 200) {
              uni.showToast({ icon: 'success', title: '成功', mask: true })
              this.pageNumber = 1
              this.tableData = []
              this.getList()
            }
          })
          .finally(() => {
            this.dialog = false
          })
      }
      if (this.orderStatus === '删除订单') {
        deleteOrder(this.sn)
          .then(res => {
            if (res.code === 200) {
              uni.showToast({ icon: 'success', title: '成功', mask: true })
              this.pageNumber = 1
              this.tableData = []
              this.getList()
            }
          })
          .finally(() => {
            this.dialog = false
          })
      }
      // if (this.orderStatus === "下载资质") {
      //   uni.navigateTo({ url: '/subpackage/order/dw?sn=' + this.sn })
      // }
    },
    // 订单 各种 按钮
    orderStatusBtn (val, item) {
      this.sn = item.sn
      if (val === '立即支付') {
        uni.navigateTo({ url: '/pages/cashier/index?sn=' + item.sn })
      }
      if (val === '取消订单') {
        this.orderStatus = '取消订单'
        this.title = '取消订单'
        this.content = '确认取消订单，取消后将无法恢复订单？'
        this.dialog = true
      }
      if (val === '订单详情') {
        uni.navigateTo({ url: '/subpackage/order/orderInfo?type=info&sn=' + item.sn })
      }
      if (val === '再次购买') {
        this.orderStatus = '再次购买'
        this.title = '再次购买'
        this.content = '确认再次购买？'
        this.dialog = true
        // orderAgainPay(item.sn).then(res => {
        //   if (res.code === 200) {
        //     uni.switchTab({ url: '/pages/shoppingCarts/index', })
        //   }
        // })
      }
      if (val === '提醒发货') {
        remindShipment(item.sn).then(res => {
          if (res.code === 200) {
            uni.showToast({ icon: 'success', title: '成功', mask: true })
          }
        })
      }
      if (val === '确认收货') {
        this.orderStatus = '确认收货'
        this.title = '收货提示'
        this.content = '注意：请确认货物是否收到！确定收货？'
        this.dialog = true
      }
      if (val === '删除订单') {
        this.title = '删除订单'
        this.orderStatus = '删除订单'
        this.content = '确认要删除订单？删除后无法恢复！'
        this.dialog = true
      }
      if (val === '查看物流') {
        uni.navigateTo({
          url: '/subpackage/order/logistics?sn=' + item.sn
        })
      }
    },
    // copy
    copy (val) {
      uni.setClipboardData({ data: val })
    },
    // 按钮
    setOrderButton (item) {
      if (item.orderStatus === 'UNPAID') {
        return [
          { title: '立即支付', styles: 'atOncePay' },
          { title: '取消订单', styles: 'cancelOrder' }
        ]
      }
      // if (item.orderStatus === "UNPAID" && item.payStatus !== "UNPAID") {
      //   return [
      //     { title: "订单详情", styles: "orderInfo" },
      //     { title: "取消订单", styles: "cancelOrder" },
      //   ]
      // }
      // UNDELIVERED:待发货
      if (item.orderStatus === 'UNDELIVERED' || item.orderStatus === 'PAID') {
        return [
          { title: '再次购买', styles: 'buyAgain' },
          { title: '提醒发货', styles: 'remindShipping' },
          { title: '确认收货', styles: 'confirm' }
        ]
      }
      // CANCELLED:已取消
      if (item.orderStatus === 'CANCELLED') {
        return [
          { title: '再次购买', styles: 'buyAgain' },
          { title: '删除订单', styles: 'remindShipping' }
        ]
      }
      // DELIVERED: 待收货
      if (item.orderStatus === 'DELIVERED') {
        return [
          { title: '确认收货', styles: 'confirm' },
          { title: '查看物流', styles: 'checkLogistics' },
          { title: '申请售后', style: 'remindShipping' }
        ]
      }
      // COMPLETED: 已完成
      if (item.orderStatus === 'COMPLETED') {
        return [
          { title: '删除订单', styles: 'delOrder' },
          { title: '查看物流', styles: 'checkLogistics' },
          { title: '再次购买', styles: 'buyAgain' }
        ]
      }
    },
    // 订单状态
    setOrderStatus (item) {
      return dict.order_status_type[item.orderStatus]
    },
    // setGoodsTypeNum (item) {
    //   if (item) {
    //     return item.split(',').length
    //   }
    // },
    // 订单显示图片
    setOrderImg (item) {
      let a = []
      if (item.length > 2) {
        item.slice(0, 3).forEach(i => {
          a.push({ image: i.image })
        })
        return a
      } else {
        item.forEach(i => {
          a.push({ image: i.image })
        })
        return a
      }
    },
    // 订单 商品数量
    setOrderGoodsNum (item) {
      if (item.length) {
        let a = 0
        item.forEach(i => {
          a += parseInt(i.num)
        })
        return a
      } else {
        return 0
      }
    },
    clickTitle (item) {
      this.type = item
      this.tableData = []
      this.pageNumber = 1
      this.getList()
    },
    getList () {
      queryOrder({
        clientType: '',
        tag: this.type,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          this.tableData.push(...res.data.records)
          uni.stopPullDownRefresh()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order_container {
  background: #f9f9f9;
  min-height: 100vh;

  .title {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f9f9f9;
    font-size: 32rpx;
    padding: 30rpx 0 23.06rpx 0;

    .active {
      color: #2770fb;
    }
  }

  .list {
    margin: 0 25rpx;

    .item {
      background: #fff;
      margin: 20rpx 0;
      padding: 30.19rpx 35.42rpx 30.19rpx 25rpx;
      border-radius: 11rpx;

      .one {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f9f9f9;
        padding-bottom: 20rpx;

        text {
          display: inline-block;
          font-size: 28rpx;
        }

        text:nth-child(2) {
          width: 45%;
          font-size: 25rpx;
        }

        text:nth-child(3) {
          width: 58rpx;
          height: 27rpx;
          font-size: 20rpx;
          border: 1px solid #2871fc;
          border-radius: 14rpx;
          text-align: center;
        }

        text:nth-child(4) {
          color: #ef231b;
        }
      }

      .two {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40.97rpx 10rpx 30.28rpx 0;

        .imgList {
          display: flex;

          image {
            width: 149.31rpx;
            height: 149.31rpx;
            margin-right: 22rpx;
          }
        }

        .right {
          width: 10rpx;
          height: 16rpx;
        }
      }

      .three {
        display: flex;
        justify-content: space-between;

        view:nth-child(1) {
          color: #585858;
          font-size: 25rpx;
        }

        view:nth-child(2) {
          font-size: 28rpx;

          text:nth-child(2) {
            color: #ef231b;
            font-size: 26rpx;
          }
        }
      }

      .four {
        margin-top: 40.31rpx;
        display: flex;
        justify-content: flex-end;

        text {
          display: inline-block;
          width: 142rpx;
          height: 58rpx;
          font-size: 25rpx;
          border: 1px solid #2871fc;
          border-radius: 29rpx;
          line-height: 57rpx;
          text-align: center;
          margin-left: 24.41rpx;
        }

        .afterSales,
        .cancelOrder {
          color: #585858;
          border: 1px solid #585858;
        }

        .delOrder {
          border: 1px solid #585858;
        }

        .atOncePay,
        .confirm,
        .remindShipping {
          color: #ef231b;
          border: 1px solid #ef231b;
        }

        .dw {
          color: #2871fc;
          border: 1px solid #000000;
        }
      }
    }
  }

  .list2 {
    font-size: 30rpx;
    opacity: 0.6;
    margin: 60% 0 0 35%;
  }
}
</style>
